mui.init();
var amap = null;
var walking = null;
var clientWidth = window.innerWidth;
var clientHeight = window.innerHeight;
App.init();
var offCanvasWrapperContent = new Vue({
	el: '#offCanvasWrapper',
	data: {
		immersed: 0,
		footBtnWidth: 100,
		locationMarketPoint: {},
		locationPoint: [],
		amapMarkerList: [],
		clientHeight: clientHeight,
		clientWidth: clientWidth,
		amapCenter: {},
		amapRange: {
			northEast: '',
			southWest: ''
		},
		chargePlaceList: [],
		chargePlaceMarkerList: [],
		chargePlaceMarkerGroupList: {},
		chargePlaceSelectInfo: {},
		userInfo: {},
		isLogin: false
	},
	watch: {
		userInfo: function(newVal, oldVal) {
			if(newVal.id > 0) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
		},
		chargePlaceList: function(newVal, oldVal) {
			var that = this;
			that.chargePlaceMarkerList = [];
			for(var i = 0; i < that.chargePlaceList.length; i++) {
				var chargePlace = that.chargePlaceList[i];
				chargePlace.place_image = Http.domain + chargePlace.place_image;
				var flag = true;
				for(var j = 0; j < that.chargePlaceMarkerList.length; j++) {
					if(that.chargePlaceMarkerList[j].type == chargePlace.charge_type_id) {
						chargePlaceMarkerGroup.marker.push(that.powerBankMarker(chargePlace));
						flag = false;
					}
				}
				if(flag) {
					var chargePlaceMarkerGroup = new Object();
					chargePlaceMarkerGroup.type = chargePlace.charge_type_id;
					chargePlaceMarkerGroup.name = chargePlace.type.name;
					chargePlaceMarkerGroup.name = chargePlace.type.name;
					chargePlaceMarkerGroup.image = Http.domain + chargePlace.type.type_image;
					chargePlaceMarkerGroup.marker = [];
					chargePlaceMarkerGroup.marker.push(that.powerBankMarker(chargePlace));
				}
				that.chargePlaceMarkerList.push(chargePlaceMarkerGroup);
			}

			for(var z = 0; z < that.chargePlaceMarkerList.length; z++) {
				var chargePlaceMarker = that.chargePlaceMarkerList[z];
				var chargePlaceMarkerGroup = new Object();
				chargePlaceMarkerGroup.type = chargePlaceMarker.type;
				chargePlaceMarkerGroup.marker = new AMap.OverlayGroup(chargePlaceMarker.marker);
				amap.add(chargePlaceMarkerGroup.marker);
			}

		},
		amapRange: function(newVal, oldVal) {
			var that = this;
			Http.get('getAroundChargePlace', {
				data: {
					northEast: newVal.northEast,
					southWest: newVal.southWest
				},
				success: function(res) {
					that.chargePlaceList = res.data;
				}
			})
		}
	},
	mounted: function() {
		var that = this;
		if(window.plus) {
			that.plusReady();
		} else {
			document.addEventListener('plusready', that.plusReady, false);
		}
		$('.mui-inner-wrap').on('drag', function(event) {
			event.stopPropagation();
			//			return false;
		});
		that.footBtnWidth = (clientWidth - 152 - 10) / 2;
		that.immersed = App.getImmersed();

	},
	methods: {
		plusReady: function() {
			var that = this;
			that.userInfo = JSON.parse(localStorage.userInfo)
			amap = new AMap.Map('amapContainer', {
				//				zoomEnable: false,
				mapStyle: 'amap://styles/2268fc55cc2047006e6a61bf4a833e41', //设置地图的显示样式
			});

			walking = new AMap.Walking({
				map: amap,
				hideMarkers: true,
				autoFitView: false
			});

			amap.on('click', function(ev) {
				$('.power-bank-index-foot-shop').css('transform', 'translateY(200px)')
				walking.clear();
			})

			amap.on('moveend', function() {
				that.getAmapRange();
			});

			that.getLocation();
		},
		powerBankMarker: function(powerBank) {
			var that = this;
			var markerContent = '<div class="amap-custom-content-marker"><img src="' + Http.domain + powerBank.type.type_image + '"</div>';
			var marker = new AMap.Marker({
				content: markerContent,
				icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
				position: [powerBank.place_lng, powerBank.place_lat],
				offset: new AMap.Pixel(-14, -33)
			});
			marker.on('click', function(e) {
				that.chargePlaceSelectInfo = powerBank
				clickPoint(e)
			});
			return marker;
		},
		getLocation: function() {
			amap.plugin('AMap.Geolocation', function() {

				geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：无穷大
					convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
					showButton: false, //显示定位按钮，默认：true
					showMarker: false, //定位成功后在定位到的位置显示点标记，默认：true
					showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
					panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
					zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				});
				amap.addControl(geolocation);
				geolocation.getCurrentPosition();
				//		console.log(geolocation);
				AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
			});
		},
		getAmapCenter: function() {
			var that = this;
			that.amapCenter = amap.getCenter();
		},
		getAmapRange: function() {
			var that = this;
			var bounds = amap.getBounds();
			var amapRange = {};
			amapRange.northEast = bounds.northeast.toString();
			amapRange.southWest = bounds.southwest.toString();
			that.amapRange = amapRange;
		}
	}
})
mui('body').on('tap', '#showUserMenu', function() {
	//	App.navigatorTo({
	//		url: 'login.html', //String类型,要打开的界面的地址
	//		id: 'login', //String类型,要打开的界面的id
	//	})
	mui('#offCanvasWrapper').offCanvas('show');
})
mui('body').on('tap', '#useSystemMap', function() {
	plus.maps.openSysMap(new plus.maps.Point(offCanvasWrapperContent.chargePlaceSelectInfo.place_lng, offCanvasWrapperContent.chargePlaceSelectInfo.place_lat), offCanvasWrapperContent.chargePlaceSelectInfo, new plus.maps.Point(offCanvasWrapperContent.locationPoint[0], offCanvasWrapperContent.locationPoint[1]))
})

document.querySelector('.mui-off-canvas-wrap').addEventListener('hidden', function(event) {
	$('.mui-inner-wrap').on('drag', function(event) {
		event.stopPropagation();
	});
})

mui('body').on('tap', '#getLocationBtn', function() {
	offCanvasWrapperContent.getLocation();
})

mui('body').on('tap', '.power-bank-action-btn', function() {
	var that = this;
	App.checkLogin(function(userInfo) {
		App.navigatorTo({
			url: 'scan-code.html', //String类型,要打开的界面的地址
			id: 'scanCode', //String类型,要打开的界面的id
			extras: {
				type: $(that).data('type'),
				prevWebviewId: plus.webview.currentWebview().id
			}
		})
	})

})

function onComplete(res) {
	amap.remove(offCanvasWrapperContent.locationMarketPoint);
	walking.clear();
	offCanvasWrapperContent.locationPoint = [res.position.lng, res.position.lat];
	offCanvasWrapperContent.locationMarketPoint = new AMap.Marker({
		icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
		position: offCanvasWrapperContent.locationPoint
	});
	amap.setCenter([res.position.lng, res.position.lat]);
	amap.add(offCanvasWrapperContent.locationMarketPoint);
	amap.setFitView();
	offCanvasWrapperContent.getAmapRange();
}

function clickPoint(e) {
	//	console.log(e)
	walking.clear();
	//	walking.clear();
	walking.search(offCanvasWrapperContent.locationPoint, [e.lnglat.lng, e.lnglat.lat], function(status, result) {
		// result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
		if(status === 'complete') {
			$('.power-bank-index-foot-shop').css('transform', 'translateY(0)')
			//			log.success('绘制步行路线完成')
		}
	});
}

window.addEventListener('getScanCode', function(e) {
	plus.nativeUI.showWaiting('正在获取机柜信息');
	Http.get('getCabinetByName', {
		data: {
			cabinetName: e.detail.result
		},
		success: function(res) {
			plus.nativeUI.closeWaiting();
			if(res.data.cabinetLendingList.length > 0) {
				App.navigatorTo({
					url: 'cabinet-select.html', //String类型,要打开的界面的地址
					id: 'cabinetSelect', //String类型,要打开的界面的id
					styles: {
						titleNView: {
							autoBackButton: true,
							backgroundColor: '#ebebeb'
						}
					},
					extras: {
						cabinet: res.data
					}
				})
			} else {
				plus.nativeUI.toast('该机柜无可可用充电宝', {
					verticalAlign: 'center'
				});
			}
			console.log(res)
		}
	})
})

document.addEventListener('userInfoRefreshed', function(e) {
	offCanvasWrapperContent.userInfo = e.detail.userInfo;
}, false);